/**
 * Author: wangjunfu
 * Component: Editable
 * Date: 2016-12-22
 * Description: 客运路线，途径站点
 */

(function ($) {

    'use strict';

    var EditableTable = {

        options: {
            addButton: '#addPlaceSite',
            table: '#datatable-editable'
        },

        initialize: function () {
            this
                .setVars()
                .build()
                .events();
        },

        setVars: function () {
            this.$table = $(this.options.table);
            this.$addButton = $(this.options.addButton);

            return this;
        },

        build: function () {
            this.datatable = this.$table.DataTable({
                aoColumns: [
                    null,
                    null,
                    null,
                    null,
                    null,
                    null,
                    null,
                    null,
                    null,
                    {"bSortable": false}
                ]
            });

            window.dt = this.datatable;

            return this;
        },

        events: function () {
            var _self = this;

            this.$table.on('click', 'a.remove-row', function (e) {
                e.preventDefault();

                // 删除当前行
                var $row = $(this).closest('tr');
                _self.rowRemove($row);
            });

            this.$addButton.on('click', function (e) {
                e.preventDefault();

                _self.rowAdd();
            });

            return this;
        },

        // ==========================================================================================
        // ROW FUNCTIONS
        // ==========================================================================================
        rowAdd: function () {

            //alert("test data!")

            var _self = this,
                actions,
                data,
                $row;

            actions = [
                '<a href="javascript:void(0)" class="on-default remove-row"><i class="fa fa-trash-o"></i></a>'
            ].join(' ');

            // 追加数据
            data = _self.datatable.row.add([0, 0, '', '', '', '', '', '', '', actions]);
            $row = _self.datatable.row(data[0]).nodes().to$();
            $row.find('td:last').addClass('actions');

            _self.rowEdit($row);
            _self.datatable.order([0, 'asc']).draw();   // 排序
            $('.select-updown').last().selectpicker('refresh'); // 刷新下拉列表

            // 最后一行增加一个class
            $("#datatable-editable").find("tr:last").addClass('gradeA');

            console.log("增加一行");
        },

        rowEdit: function ($row) {
            var _self = this, data, len;
            var factor_names = ["f_id", "f_travelId", "f_sort", "f_siteName", "f_upDown", "f_goTime", "f_ticketPrice", "f_longitude", "f_latitude", "action"];

            data = this.datatable.row($row.get(0)).data();

            $row.children('td').each(function (i) {
                var $this = $(this);

                if (i === 3) {
                    len = 280
                } else  if (i >= 4 && i <= 8) {
                    len = 150;
                } else {
                    len = 100;
                }

                if (!$this.hasClass('actions')) {
                    if (i === 0 || i === 1) {
                        $this.attr("style", "display: none");
                    }

                    if (i === 2) {
                        $this.html("<input type='text' id='" + factor_names[i] + "' name='" + factor_names[i] + "' class='form-control input-block' value='" + data[i] + "' style='width: " + len + "px;' onkeyup='value=value.replace(/^(0+)|[^\\d]+/g,\"\")'/>");
                    } else if (i === 4) {
                        $this.attr("style", "padding-right: 30px");
                        $this.html("<select id='f_upDown' name='f_upDown' class='selectpicker select-updown' data-style='btn-white'><option value='1'>上车</option><option value='2'>下车</option></select>");
                    } else {
                        $this.html("<input type='text' id='" + factor_names[i] + "' name='" + factor_names[i] + "' class='form-control input-block' value='" + data[i] + "' style='width: " + len + "px;' />");
                    }
                }
            });

            console.log("增加一行 i");
        },

        rowRemove: function ($row) {
            this.datatable.row($row.get(0)).remove().draw();
        }
    };

    $(function () {
        EditableTable.initialize();
    });

}).apply(this, [jQuery]);